<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。




    // Promise对象有以下两个特点。
    // （1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
    // （2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。





    // Promise对象是一个构造函数，用来生成Promise实例
    // Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
    // const promise = new Promise((resolve, reject) => {
    //   // ... some code
    //   // 可以将异步的代码放在Promise构造函数的里面
    //   setTimeout(() => {
    //     // resolve和reject都是函数
    //     // resolve函数调用就相当于Promise从进行中变成了已成功
    //     // resolve函数可以传递一个参数,这个参数会在实例的.then方法的函数里面接收到
    //     // reject函数调用就相当于Promise从进行中变成了已失败
    //     resolve(123);
    //   }, 3000);
    // });

    // // promise实例可以使用.then方法，里面接受一个函数
    // // .then函数是在promise的状态变成成功的时候调用
    // promise.then((res) => {
    //   console.log("promise结束了" + res);
    // })





    const promise = new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'https://cnodejs.org/api/v1/topics');
      xhr.send();
      xhr.onload = function() {
        if (xhr.status !== 200) {
          // console.log(JSON.parse(xhr.responseText)); // 数据一
          // resolve函数调一下就表示已成功了
          resolve(JSON.parse(xhr.responseText));
        } else {
          // console.error('请求失败', xhr.status);
          // reject函数调一下就表示已失败了
          // reject里面传的参数就会到catch的函数的参数里
          reject("网络错误");
        }
      };
    });

    // 什么时候resolve就什么时候执行.then
    promise.then((res) => {
      console.log("请求已结束");
      console.log(res);
    }).catch((err) => {
      console.log(err);
    })

  </script>
</body>
</html>